<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>班级信息管理</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
</head>

<style>
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[type="number"]{
        -moz-appearance: textfield;
    }
</style>
<body>
<%--<h6>管理员用户：<%= request.getSession().getAttribute("user") %></h6>--%>
<h6>管理员用户：${user}</h6>
<div class="container" style="text-align: center">
    <h2>班级信息管理</h2>
    <button class="btn btn-info" data-toggle="modal" data-target="#modalAdd">
        新增
    </button>
    <a class="btn btn-warning" href="getClassBean">
        全部
    </a>
    <a class="btn btn-default" href="main">
        返回
    </a>
</div>

<hr>

<%-- 按条件查询 --%>
<div class="container form-bg">
    <form class="form-horizontal" action="getClassBean" method="post">
        <hr>
        <div class="form-group"><button type="submit" class="btn">查询</button></div>
        <div class="form-group"><label>班号：
            <input type="number" placeholder="输入班号" name="id" value="${condition.id}">
        </label></div>
        <div class="form-group"><label>班名：
            <input type="text" placeholder="输入班号" name="name" value="${condition.name}">
        </label></div>
        <div class="form-group"><label>年级：
            <input type="text" placeholder="输入年级" name="grade" value="${condition.grade}">
        </label></div>
        <div class="form-group"><label>老师：
            <input type="text" placeholder="输入老师" name="teacher" value="${condition.teacher}">
        </label></div>
        <div class="form-group"><label>口号：
            <input type="text" placeholder="输入口号" name="slogen" value="${condition.slogen}">
        </label></div>
        <div class="form-group"><label>人数：
            <input type="number" placeholder="输入人数" name="num" value="${condition.num}">
        </label></div>
        <hr>
    </form>
</div>

<hr>

<%-- 表格 --%>
<table class="table">
    <thead>
    <tr>
        <th>操作</th>
        <th>班号</th>
        <th>班名</th>
        <th>年级</th>
        <th>老师</th>
        <th>口号</th>
        <th>人数</th>
    </tr>
    </thead>
    <tbody>

    <%-- 循环输出表的每一行 jstl --%>
    <c:forEach items="${classBeanList}" var="classBean" varStatus="s">
        <tr>
            <td>
                <button class="btn btn-danger" onclick="deleteClassRow(this)">
                    删除
                </button>
                <button class="btn btn-info" data-toggle="modal" data-target="#modalEdit" onclick="editClassEchoValue(this)">
                    编辑
                </button>
                <a class="btn btn-warning" href="getUserByPage?cid=${classBean.id}&comeFromClassPage=true">
                    学生信息
                </a>
            </td>
<%--            <td><input class="checkbox" type="checkbox"></td>--%>
            <td class="tdId">${classBean.id}</td>
            <td class="tdName">${classBean.name}</td>
            <td class="tdGrade">${classBean.grade}</td>
            <td class="tdTeacher">${classBean.teacher}</td>
            <td class="tdSlogen">${classBean.slogen}</td>
            <td class="tdNum">${classBean.num}</td>
        </tr>
    </c:forEach>
    </tbody>
</table>


<%-- 新增表格 模态框 --%>
<div class="modal" id="modalAdd" data-backdrop="static">
    <%-- 窗口声明 --%>
    <div class="modal-dialog">
        <%-- 内容声明 --%>
        <div class="modal-content">
            <%-- 框的标题 --%>
            <div class="modal-header">
                <button class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
                <h4 class="modal-title">新班级</h4>
            </div>
            <%--框内信息--%>
            <div class="modal-body">
                <label>班号</label>
                <input class="form-control" type="number" name="classId" onchange="checkIdBeforeAdd()"  required>
                <p id="classIdExistMark">班号已存在</p>
                <hr>
                <label>班级名称</label>
                <input class="form-control" type="text" name="className" required>
                <hr>
                <label>年级</label>
                <input class="form-control" type="text" name="classGrade" required>
                <hr>
                <label>老师</label>
                <input class="form-control" type="text" name="classTeacher" required>
                <hr>
                <label>口号</label>
                <input class="form-control" type="text" name="classSlogen" required>
                <hr>
            </div>
            <%-- 框的按钮 --%>
            <div class="modal-footer">
                <button class="btn btn-info" id="addRow">
                    确定
                </button>
                <button class="btn btn-default" data-dismiss="modal">
                    取消
                </button>
            </div>
        </div>
    </div>
</div>

<%-- 编辑表格 模态框 --%>
<div class="modal" id="modalEdit" data-backdrop="static">
    <%-- 窗口声明 --%>
    <div class="modal-dialog">
        <%-- 内容声明 --%>
        <div class="modal-content">
            <%-- 框的标题 --%>
            <div class="modal-header">
                <button class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
                <h4 class="modal-title">编辑班级</h4>
            </div>
            <%--框内信息--%>
            <div class="modal-body">
                <label>班号</label>
                <p name="classId"></p>
                <hr>
                <label>班级名称</label>
                <input class="form-control" type="text" name="className" required>
                <hr>
                <label>年级</label>
                <input class="form-control" type="text" name="classGrade" required>
                <hr>
                <label>老师</label>
                <input class="form-control" type="text" name="classTeacher" required>
                <hr>
                <label>口号</label>
                <input class="form-control" type="text" name="classSlogen" required>
                <hr>
            </div>
            <%-- 框的按钮 --%>
            <div class="modal-footer">
                <button class="btn btn-info" id="updateRow">
                    确定
                </button>
                <button class="btn btn-default" data-dismiss="modal">
                    取消
                </button>
            </div>
        </div>
    </div>
</div>
</body>

<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/class.js"></script>

</html>
